<template>
  <div class="scheduling-monitor">
    <Card title="调度监控" :bordered="false">
      <div class="monitor-overview">
        <Row :gutter="16">
          <Col :span="8">
            <div class="monitor-item">
              <div class="monitor-number">{{ stats.activeSchedules }}</div>
              <div class="monitor-label">活跃调度</div>
            </div>
          </Col>
          <Col :span="8">
            <div class="monitor-item">
              <div class="monitor-number">{{ stats.pendingSchedules }}</div>
              <div class="monitor-label">待处理</div>
            </div>
          </Col>
          <Col :span="8">
            <div class="monitor-item">
              <div class="monitor-number">{{ stats.completedSchedules }}</div>
              <div class="monitor-label">已完成</div>
            </div>
          </Col>
        </Row>
      </div>

      <div class="monitor-details">
        <div class="placeholder-content">
          <IconifyIcon icon="mdi:monitor-dashboard" size="48" />
          <p>调度监控详情功能开发中...</p>
        </div>
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { Card, Col, Row } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

const stats = reactive({
  activeSchedules: 45,
  pendingSchedules: 12,
  completedSchedules: 234,
});
</script>

<style scoped>
.scheduling-monitor {
  padding: 20px;
}

.monitor-overview {
  margin-bottom: 24px;
}

.monitor-item {
  padding: 20px 0;
  text-align: center;
}

.monitor-number {
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
}

.monitor-label {
  font-size: 14px;
  color: #666;
}

.monitor-details {
  margin-top: 24px;
}

.placeholder-content {
  padding: 60px 20px;
  color: #999;
  text-align: center;
}

.placeholder-content p {
  margin-top: 16px;
  font-size: 16px;
}
</style>
